<template>
  <el-container>
    <el-header style="height: auto; padding: 0; background: transparent">
      <el-card shadow="never">
        <el-descriptions :column="1" title="问题方案">
          <el-descriptions-item label="问题">
            <i class="el-icon-circle-close"></i>
            按住shift+鼠标点选， 实现连选功能。
          </el-descriptions-item>
          <el-descriptions-item label="方案">
            <i class="el-icon-circle-check"></i>
            shift是否按下pin, 点选startIndex, endIndex, 区间赋值checkbox。
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-header>

    <el-main style="display: flex; padding: 0; margin-top: 20px">
      <el-card shadow="never" style="flex: 1">
        <el-table border ref="table" :data="tableData" @selection-change="handleSelectionChange" @select="pinSelect">
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="日期" prop="date"></el-table-column>
          <el-table-column label="姓名" prop="name"></el-table-column>
          <el-table-column label="id" prop="id"></el-table-column>
          <el-table-column label="城市" prop="city"></el-table-column>
          <el-table-column label="辖区" prop="areas"></el-table-column>
          <el-table-column label="地址" prop="address"></el-table-column>
        </el-table>
        <br/>
        <code>
          multipleSelection: {{ multipleSelection }}
        </code>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>

export default {
  name: "selection-shiftkey",
  data() {
    return {
      multipleSelection: [], // 多选值
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        city: '上海',
        areas: '普陀区',
        address: '上海市普陀区1518号',
        id: 200300
      }, {
        date: '2016-05-02',
        name: '张强',
        city: '深圳',
        areas: '南山区',
        address: '深圳市南山区1289号',
        id: 200301
      }, {
        date: '2016-05-04',
        name: '李刚',
        city: '广州',
        areas: '番禺区',
        address: '广州市番禺区912号',
        id: 200302
      }, {
        date: '2016-05-01',
        name: '刘虎',
        city: '杭州',
        areas: '临平区',
        address: '杭州市临平区729号',
        id: 200305
      }, {
        date: '2016-05-08',
        name: '赵小刚',
        city: '成都',
        areas: '金牛区',
        address: '成都市金牛区198号',
        id: 200308
      }, {
        date: '2016-05-06',
        name: '王大治',
        city: '天津',
        areas: '北仑',
        address: '天津市北仑区223号',
        id: 200308
      }, {
        date: '2016-05-07',
        name: '桑梓',
        city: '北京',
        areas: '顺义区',
        address: '北京市顺义区马坡115号',
        id: 200308
      }],
      origin: -1,
      pin: false,
    };
  },
  created(){
    this.tableData.forEach((item, index) => {// 遍历索引,赋值给data数据
      this.$set(item, 'index', index)
    })
  },
  mounted() {
    window.addEventListener("keydown", this.handleKeyDown);
    window.addEventListener("keyup", this.handleKeyUp);
  },
  beforeDestroy() {
    window.removeEventListener("keydown", this.handleKeyDown);
    window.removeEventListener("keyup", this.handleKeyUp);
  },
  methods: {
    // 单选
    handleSelectionChange(selection) {
      this.multipleSelection = this.$refs.table.selection
    },
    // 监听shift按住和抬起
    handleKeyDown(evt) {
      if (evt.keyCode === 16 && evt.shiftKey) {
        this.pin = true;
      }
    },
    handleKeyUp(evt) {
      if (evt.keyCode === 16) {
        this.pin = false;
      }
    },
    pinSelect(selection, row) {
      const data = this.$refs.table.tableData; 
      if (this.pin && (this.origin > -1)) {
        this.$refs.table.clearSelection()
        const [startInd, endInd] = [this.origin, row.index].sort()
        if (startInd === endInd) return this.$refs.table.toggleRowSelection(data[startInd]); 
        if (startInd === -1) return
        for(let i = startInd; i <= endInd; i++) {
          this.$refs.table.toggleRowSelection(data[i], true); 
        }
      } 
      else {
        this.origin = row.index; 
      }
    },
  },
};
</script>

<style scoped>
.el-descriptions /deep/ .el-icon-circle-close {
  color: #f56c6c;
  margin-right: 6px;
}
.el-descriptions /deep/ .el-icon-circle-check {
  color: #42b883;
  margin-right: 6px;
}
</style>
